<template>
  <!-- 包裹组件 -->
  <div class="main">
    <!-- 头部 -->
<!--    <div class="header">-->
<!--      <div @click="$router.push('/')">柳州中心工企业应急周转资金申请平台</div>-->
<!--    </div>-->
    <TopHeader></TopHeader>

    <!-- 个人信息 -->
    <div>
      <!-- 个人中心头部 -->
      <div class="individual">
        <div class="individual-main flex">
          <img src="@/assets/images/personal/personal.png">
          <div class="individual-text">个人中心</div>
        </div>
      </div>
      <!-- 个人信息主界面 -->
      <div class="personal-details">
        <!-- 个人信息界面头部 -->
        <div class="company flex">
          <!-- 头像 -->
          <div style="margin: auto 0;">
            <img class="personal-img" style="z-index: 9;" src="@/assets/images/personal/img.png">
            <img class="personal-img2" src="@/assets/images/personal/touxiang.jpg">
          </div>
          <!-- 名字、公司 -->
          <div class="company-name">
            <div>{{ form.name }}</div>
            <div class="company-img flex">
              <div><img src="@/assets/images/personal/v.png"></div>
              <div>柳州游泳有限公司</div>
            </div>
          </div>
        </div>

        <!-- 个人和公司的基本信息 -->
        <div>
          <!-- 左边那条杠和标题 -->
          <div class="basic">
            <!-- 这个div用来调整位置 -->
            <div class="flex">
              <div class="basic-name">基本信息</div>
              <!-- 个人信息修改按钮 -->
              <div>
                <el-button type="text" class="basic-change" @click="dialogFormVisible = true">【修改】</el-button>
                <el-dialog title="修改信息" :visible.sync="dialogFormVisible"  style="width: 70%;height: 100%; margin: auto">
                  <el-form :model="form" ref="form" :rules="rules"> <!-- 规则校验 -->
                    <el-form-item label="法人姓名" prop="name" :label-width="formLabelWidth">
                      <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="法人身份证号" prop="number" :label-width="formLabelWidth">
                      <el-input v-model="form.number" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item  label="法人照片" prop="img" :rules="[]" :label-width="formLabelWidth">
                      <!--上传图片功能-->
                        <el-upload
                            ref="my-upload"
                            :class="{ 'upload-img': fileList.length }"
                            action="#"
                            list-type="picture-card"
                            :auto-upload="false"
                            :on-change="handleChange"
                            :multiple="true"
                            :before-upload="beforeAvatarUpload"
                            :file-list="fileList"
                            :limit="3"
                            accept=".png, .jpg, .JPG, .JPEG, .jpeg, .PNG .GIF, .gif"
                        >
                          <!--
                          :action="actionUrl"			   //上传路径
                          :headers="headers"			   //设置请求头，传这个token
                          multiple="false"			  //是否允许多文件上传，这里就上传一个图片，所以就设置成false了 -->
                          <i slot="default" class="el-icon-plus" />
                          <div style="width: 100%;height: 100%;" slot="file" slot-scope="{ file }">
                            <img
                                style="width: 100%;height: 100%;"
                                class="el-upload-list__item-thumbnail"
                                :src="file.url"
                                alt=""
                            >
                            <!--删除图片-->
                            <span class="el-upload-list__item-actions">
                              <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <i class="el-icon-delete" />
                              </span>
                            </span>
                        </div>
                    </el-upload>


                    </el-form-item>
                    <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
                      <el-input v-model="form.gender" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称" prop="business" :label-width="formLabelWidth">
                      <el-input v-model="form.business" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="统一信用代码" prop="credit" :label-width="formLabelWidth">
                      <el-input v-model="form.credit" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="mailbox" :label-width="formLabelWidth">
                      <el-input v-model="form.mailbox" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone" :label-width="formLabelWidth">
                      <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="相关账号绑定" prop="account" :label-width="formLabelWidth">
                      <el-input v-model="form.account" autocomplete="off"></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer" >
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                  </div>
                </el-dialog>
              </div>
            </div>
          </div>
          <!-- 个人的信息块 -->
          <div class="basic-personage flex">
            <div class="basic-message">
              <div class="number flex">
                <div>法人姓名：{{ form.name }}</div>
                <div>法人身份证号：{{ form.number }}</div>
              </div>
              <div>企业名称：{{ form.business }}</div>
              <div>邮箱：{{ form.mailbox }}</div>
              <div>相关账号绑定：{{ form.account }}</div>
            </div>

            <div class="basic-message">
              <div class="flex">
                <div>法人照片</div>
                <div>
                  <img style="width: 94px;height: 86px;margin: 0 20px;" src="@/assets/images/personal/touxiang.jpg">
                  <img style="width: 94px;height: 86px;" src="@/assets/images/personal/touxiang.jpg">
                </div>
              </div>
              <div>性别：{{ form.gender }}</div>
              <div>统一信用代码：{{ form.credit }}</div>
              <div>手机号码：{{ form.phone }}</div>
              <div></div>
            </div>

          </div>
        </div>

        <!-- 消息提醒 -->
        <div>
          <div class="basic">
            <!-- 这个div用来调整位置 -->
            <div>
              <div class="basic-name">消息提醒</div>
            </div>
          </div>

          <div>
            <ul>
              <li class="message-remind flex" v-for="(item,index) in contents" :key="index">
                <div><img class="message-img" src="@/assets/images/personal/bell.png"></div>
                <div class="message-text">{{ item.manage }}</div>
                <div>{{ item.time }}</div>
              </li>
            </ul>
          </div>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import TopHeader from "@/components/header/header";

export default {
  name: "personal-information",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      // 修改个人信息
      form: {
        name: '张万志',  // 姓名
        number: '4508810000000000000',  // 身份证号
        business:'柳州市数据治理研究院',  // 企业名称
        mailbox:'451845165@qq.com',  // 邮箱
        account: '11546466146',  // 相关账号
        gender: '男',  // 性别
        credit: '6514789456154',  // 信用代码
        phone: '13578645458',  // 手机号码
      },
      // 修改信息规则校验：rules: {}
      rules: {
        name: [
          { required: true, message: "姓名不能为空" },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        number: [
          { required: true, message: "身份证号不能为空" },
          { min: 1, max: 18, message: '长度在 1 到 19 个字符', trigger: 'blur' }
        ],
        business: [
          { required: true, message: "企业名称不能为空" }
        ],
        mailbox: [
          { required: true, message: "邮箱不能为空" },
          { min: 1, max: 8, message: '长度在 1 到 8 个字符', trigger: 'blur' }
        ],
        account: [
          { required: true, message: "相关账号不能为空" },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: "性别不能为空" },
          {  }
        ],
        credit: [
          { required: true, message: "统一信用代码不能为空" },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: "手机号码不能为空" },
          { min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'blur' }
        ],
      },
      // 消息提醒
      contents:[
        {
          manage:'您申请的应急资金申请初审通过，请及时上传复审材料！',
          time:'2022/2/24',
        },
        {
          manage:'您申请的应急资金申请初审通过，请及时上传复审材料！',
          time:'2022/2/24',
        },
        {
          manage:'您申请的应急资金申请初审通过，请及时上传复审材料！',
          time:'2022/2/24',
        },
        {
          manage:'您申请的应急资金申请初审通过，请及时上传复审材料！',
          time:'2022/2/24',
        },
      ],
      // 编辑图片
      inputForm: {
        id: "",
        img: '' // 机楼图片
      },
      // 编辑图片
      fileList: []
    }
  },
  //添加水印
  mounted() {
    this.watermark.set("张万志")//页面添加水印，暂时写死，等与后端交互，水印要对应当前登录用户的真实姓名
  },
  components: {
    TopHeader
  },
  methods: {
    // 上传之前的回调
    beforeAvatarUpload(file) {
      const fileType = file.raw.type
      const isJPG = fileType === 'image/jpg' || fileType === 'image/jpeg' || fileType === 'image/png'
      const isLt20M = file.raw.size / 1024 / 1024 < 20
      if (!isJPG) {
        this.$message.error('上传图片的格式只能是 JPG或PNG 格式!')
      }
      if (!isLt20M) {
        this.$message.error('上传图片的大小不能超过 20M!')
      }
      return isJPG && isLt20M
    },
    // 移除图片
    handleRemove(file) {
      const index = this.fileList.indexOf(file.url)
      this.fileList.splice(index, 1)
    },
    // 上传图片
    handleChange(file, fileList) {
      const isFileType = this.beforeAvatarUpload(file)
      // 如果文件类型不对，则清空表单及附件列表
      if (!isFileType) {
        this.fileList = []
        return
      }
      this.inputForm.img = file.raw  // 这个就是上传图片的二进制对象
      this.fileList = [fileList[0]]
    },
  },

}
</script>

<style lang="less" scoped>

.main {
  max-width:100%;
  margin:0 auto;
  height: 1450px;
}

/*  个人中心盒子布局  */
.individual {
  width: 100%;
  height: 106px;
  background-color: rgba(230, 238, 248, 1);


  .individual-main {
    align-items: center;
    padding: 26px 0 33px 290px;
    white-space:nowrap;

    .individual-text {
      padding-left: 30px;
      font-size: 30px;
      color: rgba(80, 80, 80, 1);
    }
  }
}
.individual img {
  width: 50px;
  height: 50px;
}
.flex {
  display: flex;
}
.personal-details {
  max-width: 1360px;
  height: 1175px;
  margin:0 auto;  /*  页面居中  */
  white-space:nowrap;

  .company {
    width: 1360px;
    height: 240px;
    background-color: #fff;
    border-bottom: 3px solid #ccc;
    line-height: 70px;
    padding-top: 38px;

    .personal-img {
      width: 150px;
      height: 150px;
    }
    .personal-img2 {
      width: 107px;
      height: 107px;
      border-radius: 50%;
      position: absolute;
      transform: translate(-118%,20%);
    }
    .company-name {
      padding-left: 30px;
      white-space:nowrap;
      margin: auto 0;
    }
    .company-img {
      color: rgba(80, 80, 80, 1);
      font-size: 18px;
    }

  }
}

.company-img img{
  width: 38px;
  height: 38px;
  margin: 16px 0;
  padding-right: 5px
}
.company-name>div:nth-child(1) {
  font-size: 26px;
  color: rgba(80, 80, 80, 1);
}

.basic {
  height: 50px;
  border-left: 5px solid rgba(12, 81, 177, 1);
  margin: 50px 0;

  .basic-name {
    height: 50px;
    font-size: 26px;
    color: rgba(80, 80, 80, 1);
    align-items: center;
    padding: 6px 12px;
  }
  .basic-change {
    font-size: 26px;
    color: rgba(212, 48, 48, 1);
    white-space:nowrap;
  }
}


.basic-personage {
  width: 1360px;
  height: 432px;
  background-color: rgba(222, 238, 250, 1);
  border-radius: 16px;

  .basic-message {
    width: 668px;
    height: 216px;
    line-height: 105px;
    margin-left: 25px;
    font-size: 18px;
    color: rgba(80, 80, 80, 1);

    .number>div:nth-child(2) {
      margin-left: 100px;
    }
  }
}

.message-remind {
  width: 1360px;
  white-space:nowrap;
  font-size: 18px;
  color: rgba(80, 80, 80, 1);
  margin: 40px 0;

  .message-img {
    width: 25px;
    height: 25px;
  }.message-text {
     margin-left: 20px;
   }
}
.message-remind>div:nth-child(3) {
  margin-left: 740px;
}
</style>
